﻿<div>

<script type="text/javascript">
    $(function () {
        $("#Button1").click(function () {
            $.easyui.showDialog({
                title: "框中创建的Dialog",
                top: 130, left: 170, width: 400, height: 200,
                locale: "#container"
            });
        });

        $("#Button2").click(function () {
            $.easyui.showDialog({
                title: "'功能演示' 选项卡中创建的Dialog",
                href: "dialog/easy/loacle/test.html",
                top: 130, left: 170, width: 400, height: 200,
                locale: "#demo"     //  当前页面中 "功能演示" 选项卡的 ID 值为 "demo"
            });
        });

        $("#Button3").click(function () {
            $.easyui.showDialog({
                title: "当前页面中创建的Dialog",
                top: 130, left: 170, width: 400, height: 200,
                topMost: false
            });
        });

        $("#Button4").click(function () {
            $.easyui.showDialog({
                title: "'顶级页面中创建的Dialog",
                top: 130, left: 170, width: 400, height: 200,
                topMost: true
            });
        });
    });
</script>

<h2>jEasyUI Dialog Extensions - 快速创建 Dialog - 指定 Dialog 的父级容器</h2>
<p>该部分扩展由文件 jeasyui.extensions.dialog.js 实现。</p>
<hr />
<input id="Button1" type="button" value="在下面的框中创建Dialog" />
<input id="Button2" type="button" value="在当前 '功能演示' 选项卡中创建Dialog" />
<input id="Button3" type="button" value="在当前页面创建Dialog" />
<input id="Button4" type="button" value="在顶级页面创建Dialog" />
<hr />
<div id="container" style="border-width: 1px; border-color: Black; border-style: solid; width: 800px; height: 400px; position: relative;"></div>

</div>